<template>
  <div class="page">
    <div class="head">
      <h5 class="text1"><i class="fa fa-bar-chart"></i> 我的信息</h5>
      <p class="text2">编辑您的信息，查看您的数据！</p>
    </div>
    <!--            ==========================================================-->
    <el-row :gutter="35">
      <el-col :xs="24" :sm="12"  :lg="6" >

          <router-link to="/message">
            <div  class="ct ct1">
              <i class="fa fa-comments fa-5x panel-status-icon"></i>
              <div class="h5">新消息</div>
              <div class="huge">{{news}}</div>
            </div>

          </router-link>

      </el-col>
      <el-col :xs="24" :sm="12"  :lg="6"  >

        <router-link to="/mytest_paper">
        <div class=" ct ct2">
          <i class="fa fa-cubes fa-5x panel-status-icon"></i>
          <div class="h5">我的试卷</div>
          <div class="huge">{{ntp}}</div>
        </div>
      </router-link>

      </el-col>
      <el-col :xs="24" :sm="12" :lg="6">

        <router-link to="/mine">
        <div class=" ct  ct3" >
          <i class="fa fa-cube fa-5x panel-status-icon"></i>
          <div class="h5">我的试题</div>
          <div class="huge">{{ntq}}</div>
        </div>
      </router-link>

      </el-col>
      <el-col :xs="24" :sm="12" :lg="6">

        <router-link to="/vip">
          <div class=" ct  ct4">
            <i class="fa fa-diamond fa-5x panel-status-icon"></i>
              <div class="h5 ">我的VIP(天)</div>
              <div class="huge">13</div>
          </div>
        </router-link>

      </el-col>
    </el-row>

    <!--  =============================================== 以上四个框   -->
    <div>
      <div class="head2">
        <div class="part1">
          <h4 class="text1">
            <i class="fa fa-bar-chart-o fa-fw"></i> 试题市场引题统计
          </h4>
          <p class="text2 ">最近一周内数据</p>
        </div>
        <el-button plain class="btn" @click="change1()">
          <i :class="i1_class"></i>
        </el-button>
      </div>
      <div class="content2" v-show="show1">
        <div class="form">
          <el-table
                  :data="tableData"
                  border
                  :fit='true'
                  :row-style="{ height: '20px' }"
                  :cell-style="{ padding: '5px 0' }"
          >
            <el-table-column prop="date" label="日期" width="130"  >
            </el-table-column>
            <el-table-column prop="week" label="周次" >
            </el-table-column>
            <el-table-column prop="times" label="引用次数"> </el-table-column>
          </el-table>
        </div>
         <div class='column' >

             <v-chart :options="bar" autoResize/>

         </div>
      </div>
      <!--            ====================================================以上表加柱形图-->
      <div style="width: 100%">

        <div class="left" >
          <div class="head2">
            <div class="part1">
              <h4 class="text1">
                <i class="fa fa-bar-chart-o fa-fw"></i> 我的收益
              </h4>
              <p class="text2 ">最近一周内数据</p>
            </div>
            <el-button plain class="btn" @click="change2()">
              <i :class="i2_class"></i>
            </el-button>
          </div>

          <div class="line content2" v-show="show2" >

                <v-chart :options="line" autoResize/>

          </div>
        </div>
        <!--        -----------------------以上 左边折线图-->
        <div class="right"  >
          <div class="head2">
            <div class="part1">
              <h4 class="text1">
                <i class="fa fa-bar-chart-o fa-fw"></i> 我的试题难度倾向
              </h4>
              <p class="text2 ">近一年数据</p>
            </div>
            <el-button plain class="btn" @click="change3()">
              <i :class="i3_class"></i>
            </el-button>
          </div>
          <div class="content2 ring" v-show="show3" >

            <v-chart :options="pie" autoResize/>
            
          </div>

        </div>
<!--          </el-col>-->
<!--        </el-row>-->
        <!--        --------------------------------以上 右边环图-->
      </div>
    </div>
  </div>
</template>

<script>
import { postJsonRequest } from "../utils/api";
import { postRequest } from "../utils/api";
import { getRequest } from "../utils/api";
import ECharts from "vue-echarts";
import 'echarts';
import "echarts/lib/chart/line";
import "echarts/lib/chart/bar";
import "echarts/lib/component/polar";
import "echarts/lib/chart/pie";

import 'echarts/lib/component/tooltip';


export default {
  name: "Index",
  components: {
    "v-chart": ECharts
  },
  mounted() {
    
    postRequest("/content/details?id="+1)
            .then(resp => {
        console.log(resp.data);
        console.log(resp.data.data.length)
        this.news=resp.data.data.length;
      },
      resp => {}
    );
    getRequest ("/content/details/question?id="+1)
       .then(resp => {
      console.log(resp.data);
      console.log(resp.data.data.length)
      this.ntq=resp.data.data.length;
    },
            resp => {}
  );
    getRequest ("/content/details/paper?id="+1)
            .then(resp => {
                      console.log(resp.data);
                      console.log(resp.data.data.length)
                      this.ntp=resp.data.data.length;
                    },
                    resp => {}
            );

    this.initPieChart();
  },
  data() {
    
    let data = [];

    for (let i = 0; i <= 360; i++) {
      let t = (i / 180) * Math.PI;
      let r = Math.sin(2 * t) * Math.cos(2 * t);
      data.push([r, i]);
    }


    return {
      
      //消息数
      news:"",
      //试题数number of test qustions
      ntq:"",
      //试卷数number of test paper
      ntp:"",
      show1: true,
      show2: true,
      show3: true,
      i1_class: "fa fa-caret-up",
      i2_class: "fa fa-caret-up",
      i3_class: "fa fa-caret-up",
      tableData: [
        { date: "2019年1月6日", week: "周一", times: 3 },
        { date: "2019年1月7日", week: "周二", times: 4 },
        { date: "2019年1月8日", week: "周三", times: 5 },
        { date: "2019年1月9日", week: "周四", times: 4 },
        { date: "2019年1月10日", week: "周五", times: 6 },
        { date: "2019年1月11日", week: "周六", times: 3 },
        { date: "2019年1月12日", week: "周日", times: 5 }
      ],

        //柱形图
        bar:{
          grid: {
            left: '3%',
            right: '4%',
            bottom: '4%',
            containLabel: true
          },
            color: ['#4682B4'],

            tooltip: {},

            xAxis: {
              type: 'category',
              data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"]
            },
            yAxis: {},
            series: [{
              name: '引用次数',
              type: 'bar',
              data: [100, 75, 50, 75, 50, 75, 100, 47, 88, 100, 99, 94],
            }]


        },
      //折线图
        line:{
          grid: {
            left: '3%',
            right: '4%',
            bottom: '5%',
            containLabel: true
          },
          color: ['#4682B4'],
          tooltip: {},
          xAxis: {
            type: 'category',
            data: ['2019-01-06', '2019-01-07', '2019-01-08', '2019-01-09', '2019-01-10', '2019-01-11', '2019-01-12']
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            data: [25 , 43, 33, 72, 89, 92, 100],
            type: 'line',
            smooth: true
          }]
        },
        //环图
      pie: {
        color:['#0b62a4','#3980b5','#679dc6'],
        tooltip: {
          trigger: "item",
          formatter: "{b} : {c} (占比{d}%)"
        },

        // 图例
        legend: {
          type: "scroll",
           //orient: "vertical",
          top: 20,
          left: "center",
          data: [], //图例数据从后台获取
          textStyle: {
            //图例文字的样式
            color: "#999",
            fontSize: 12
          }
        },
        // 直角坐标系内绘图网格
        grid: {
          left: '3%',
          right: '4%',
          bottom: '5%',
          containLabel: true
        },

        //图表展示数据从后台获取
        series: [
          {
            name: "",
            type: "pie",
            radius: ["50%", "70%"],
            selectedMode: "single",
            startAngle: 270,
            selectedOffset: 2,
            data: [
              {
                name: "高难度",
                value: 453
              },
              {
                name: "中等难度",
                value: 341
              },
              {
                name: "低难度",
                value: 159
              }
            ]
          }
        ]
      }
    };
  },
  methods: {

    change1: function() {
      this.show1=!this.show1;
      if(this.i1_class =="fa fa-caret-up")
      {
        this.i1_class ="fa fa-caret-down";
      }
      else{
        this.i1_class ="fa fa-caret-up"
      }
    },
    change2: function() {
      this.show2=!this.show2;
      if(this.i2_class =="fa fa-caret-up")
      {
        this.i2_class ="fa fa-caret-down";
      }
      else{
        this.i2_class ="fa fa-caret-up"
      }
    },
    change3: function() {
      this.show3=!this.show3;
      if(this.i3_class =="fa fa-caret-up")
      {
        this.i3_class ="fa fa-caret-down";
      }
      else{
        this.i3_class ="fa fa-caret-up"
      }
    },
    // 初始化环形图的方法
    initPieChart() {

    }
  }
};
</script>

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/>
<style scoped>
  .echarts
  {

  width:100%;

  height:350px;
  }

  .el-row {
    margin-bottom: 20px;
    &:last-child {
     margin-bottom: 0;
   }
  }

  .el-col {
    border-radius: 4px;
  }



  .ct{
    overflow: hidden;
    display: inline-block;
    height: 100px;
    width: 90%;
    margin: 0 10px 5px 0;
    background-color: white;
    border: 1px solid transparent;
    border-radius: 2px;
    padding: 5%;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.125);
    text-align: left;
    vertical-align: center ;
  }

  .head {
  margin: 20px 0 25px;
  background-color: white;
  border: 1px solid transparent;
  border-radius: 3px;
  padding: 15px 15px 15px 15px;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.125);
  text-align: left;
}

.text1 {
  font-size: 14px;
  font-weight: 400;
  color: black;
  margin: 0;
}
.text2 {
  font-size: 10px;
  color: #777777;
  margin: 0;
}

.h5 {
  font-size: x-small;
  float: right;
}

.huge {
  font-size: 300%;
  float: right ;
  vertical-align: center ;

}
.ct1 {
  color: #f56c6c;
}
.ct2 {
  color: #409eff;
}
.ct3 {
  color: #e6a23c;
}
.ct4 {
  color: #67c23a;
}
.panel-status-icon {
  float: left;
}
  .ct:hover .panel-status-icon {
    opacity: 0.4;

    transition-delay: 150ms;
    transition-duration: 300ms;
    transform: rotate(27deg) scale(2.5);

}

.part1 {
  display: inline-block;
}
.head2 {
  margin: 20px 0 0 0;
  background-color: white;
  border: 1px solid transparent;
  border-radius: 3px;
  padding: 15px;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.125);
  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
  text-align: left;
  vertical-align: top;
}
.btn {
  float: right;
}
.content2 {
  margin: 0;
  background-color: white;
  border: 1px solid transparent;
  border-radius: 3px;
  padding: 12px 15px;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  position: relative;

  text-align: left;
}

.left,
.right,
.column,
.form {
  display: inline-block;
  vertical-align: top;
}
.form,
.column {
  margin: auto 0;
  padding: 2% 2% 0 2%;
}

.column {
  width: 60%;
}
  @media only screen and (min-width: 1000px) {
    .left,
    .right {
      width: 49%;
    }
    .column {
      width: 61%
    }
    .form {
       width: 30%;
     }

  }
  @media only screen and (max-width: 1000px){
    .left,
    .right {
      width: 100%;
    }
    .column {
      width: 95%
    }
    .form {
      width: 90%
    }
  }

</style>
